<template>
    <div class="commonWrap">
        <div style="margin: 5px 0">
            <template v-if="$store.state.loginParams.source === '5'">
                <span>代理商：</span>
                <el-select
                    size="small"
                    style="width: 180px"
                    filterable
                    v-model="agentSelect"
                    @change="
                        currentPage = 1
                        getList()
                        getCompanyList()
                        companyCode = ''
                    "
                >
                <el-option label="全部" value=""></el-option>
                    <el-option
                        v-for="(item, index) in agentList"
                        :label="item.agentName"
                        :value="item.id"
                        :key="index"
                    ></el-option>
                </el-select>
            </template>
            <span>商家：</span>
            <el-select
                size="small"
                style="width: 180px"
                filterable
                clearable
                v-model="companyCode"
            >
                <el-option label="全部" value=""></el-option>
                <el-option
                    v-for="(item, index) in companyList"
                    :label="item.companyName"
                    :value="item.companyCode"
                    :key="index"
                ></el-option>
            </el-select>
            <el-button type="primary" size="mini" @click="getList"
                >查询</el-button
            >
        </div>
        <el-table
            border
            :header-cell-style="headerCellStyle"
            :data="tableData"
            style="width: 100%"
            size="small"
        >
            <el-table-column
                prop="companyName"
                label="商家名称"
            ></el-table-column>
            <el-table-column prop="addServiceName" label="年费服务名称">
            </el-table-column>
            <el-table-column prop="platformName" label="平台">
            </el-table-column>
            <el-table-column prop="date" label="操作" width="220px">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        plain
                        @click="editPlan(scope.row)"
                        type="primary"
                        >编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="width: 100%; padding: 15px" class="column right">
            <el-pagination
                background
                :current-page.sync="currentPage"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="totalNum"
            ></el-pagination>
        </div>
        <checkFee
            :value.sync="showSet"
            :currRow="currRow"
            @getList="getList"
        ></checkFee>
    </div>
</template>

<script type="text/ecmascript-6">
import checkFee from './components/checkFee'
export default {
    components: {
        checkFee
    },
    data: function () {
        return {
            companyName: '',
            showSee: false,
            pageSize: 10,
            currentPage: 1,
            totalNum: 0,
            currRow: {},
            companyList: [],
            agentList: [],
            agentSelect: '',
            companyCode: '',
            showSet: false, // 显示方案新增和编辑页面
            tableData: []
        }
    },
    created () {
        this.getAgentList()
        this.getCompanyList()
        this.getList()
    },
    methods: {
        async getAgentList () {
            let res = await this.$axios.post(this.$store.state.ip + '/server/agent/serverinfo/agentList', {
                data: {
                    agentId: this.$store.state.loginParams.agentId
                }
            })
            let response = res.data
            if (response.ret === '0') {
                this.agentList = response.data
            }
        },
        async getCompanyList () {
            let res = await this.$axios.post(this.$store.state.ip + '/server/agent/serverinfo/companyList', {
                data: {
                    agentId: this.$store.state.loginParams.agentId,
                    selectId: this.agentSelect
                }
            })
            let response = res.data
            if (response.ret === '0') {
                this.companyList = response.data
            }
        },
        handleCurrentChange (page) {
            // 换页
            this.currentPage = page
            this.getList()
        },
        async getList () {
            let res = await this.$axios.post(this.$store.state.ip + '/server/agent/serverinfo/listBuyCompany', {
                data: {
                    agentId: this.$store.state.loginParams.agentId,
                    roleId: this.$store.state.loginParams.roleId,
                    page: this.currentPage - 1,
                    companyCode: this.companyCode,
                    agentSelect: this.agentSelect,
                    size: 10
                }
            })
            let response = res.data
            if (response.ret === '0') {
                this.tableData = response.data.list || []
                this.totalNum = response.data.total
            }
        },
        editPlan (item) {
            this.currRow = item
            this.showSet = true
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../../../../static/css/variables'

.el-transfer-panel
    width: 300px

.formItem
    width: 200px
</style>